<template>

	<div class="wrapper">
	<swiper :options="swiperOption" v-if="showList">
    <swiper-slide v-for="item of list" :key="item.id" >
    	<img class="wrapper-img" :src="item.imgUrl">
    </swiper-slide>
     <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
	</div>
</template>

<script>
export default{
	name:'HomeSwiper',
  props:{
    list:Array
  },
	data() {
      return {
        swiperOption: {
         	pagination: '.swiper-pagination',
        	loop: true
        },
        swiperList:[
        {id:1,imgUrl:'http://img1.qunarzz.com/piao/fusion/1808/f4/5f2289f8675f0502.jpg_750x200_ab1633c7.jpg'},
        {id:2,imgUrl:'http://img1.qunarzz.com/piao/fusion/1809/bb/3796236479c84d02.jpg_750x200_57d68258.jpg'}
        ]
      }
    },
  computed:{
    showList(){
      return this.list.length
    }
  }
}
	
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
      background: #fff
	.wrapper
		width:100%
		height:2rem
		overflow:hidden
	.wrapper-img
	  	width:100%
	  	height:2rem
	   
		


</style>